<template>
  <u-popup v-model="show" mode="bottom" border-radius="30" :mask-close-able="false" height="95%" :safe-area-inset-bottom="true">
    <u-sticky>
      <div class="top flex">
        <u-icon class="icon" name="arrow-down" size="32" @click="cancel"></u-icon>
        <div class="title">{{ title }}</div>
      </div>
      <div class="date" v-if="queryParams.date_time">{{ queryParams.date_time.join("~") }}</div>
    </u-sticky>
    <scroll-view class="main" :scroll-top="scrollTop" :scroll-y="true" @scrolltolower="nextPage">
      <div v-for="(item, index) in list" :key="index" class="item" :class="item.read_status == 't' && 'read'">
        <!-- 原创 -->
        <div class="content flex" v-if="item.publication_type==1" @click="toDestail(item)">
          <div class="text text-cut3">
            <b class="sentiment" :class="'sentiment-'+item.sentiment_attr">{{item.sentiment_attr==1?"正":(item.sentiment_attr==2?"中":"负")}}</b>
            <b class="type" v-if="!!item.publication_type">原创</b>
            <span v-html="marked(item.keywords, item.title)"></span>
          </div>
          <div v-if="item.local_xs_image" class="img flex">
            <u-image :src="item.local_xs_image[0]" width="220rpx" height="130rpx"></u-image>
          </div>
        </div>
        <!-- 转发、评论 -->
        <div class="content" @click="toDestail(item)" v-else>
          <div class="text text-cut3">
            <b class="sentiment" :class="'sentiment-'+item.sentiment_attr">{{item.sentiment_attr_name}}</b>
            <b class="type" v-if="!!item.publication_type">{{ item.publication_type==2?"转发":(item.publication_type==7?"评论":"弹幕") }}</b>
            {{ item.title }}
          </div>
          <div class="text-cut2 source-text">
            <div class="source-text-content text-cut2" v-html="(item.summary &&  ([...item.keywords,kw],item.summary))"></div>
            <div class="source-des flex">
              <span>{{ $u.timeFormat(item.retweeted_publish_time*1000, "yyyy-mm-dd hh:MM") }}</span>
              <div class="retweeted-right flex">
                <u-icon class="retweeted-user" name="account-fill" color="#999" size="28"></u-icon>
                <span class="source-text-name">{{ item.retweeted_user_name }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="des flex">
          <div class="info flex">
            <span class="time">{{ $u.timeFormat(item.router_time*1000, isToday((item.router_time || item.publish_time)*1000)?"hh:MM":"mm-dd hh:MM") }}</span>
            <u-avatar class="avatar" :src="item.avatar" size="30"></u-avatar>
            <span v-if="item.publisher_name" class="name text-cut">{{ item.publisher_name }}</span>
            <span class="flex" v-if="item.gather_site_name.includes('新浪')">
							<i class="v-1" v-if="item.verified_type==0 || item.verified==1"></i>
							<i class="v-2" v-else-if="item.verified_type>0 || item.verified==2"></i>
						</span>
            <span class="platform text-cut">{{ item.publisher_site_name || item.gather_site_name }}<span v-if="item.channel">-{{ item.channel }}</span></span>
            <span class="area">发布于&nbsp;{{ (item.ip_region && item.ip_region[0]) || item.province }}</span>
          </div>
        </div>
      </div>
      <u-loadmore :status="status" style="margin: 20rpx 0;" />
    </scroll-view>
  </u-popup>
</template>

<script>
import { mapState } from "vuex";
import {
  articleList,
} from "./../api/event.js";

export default {
  props: {
		show: {
			type: Boolean,
			default: false
		},
    title: {
      type: String,
      default: ""
    },
    queryParams: {
      type: Object,
      default: {}
    },
		eid: {
			String,
			default: ""
		},
	},
  data() {
    return {
      scrollTop: 0.01,
      kw: "",
			list: [],
			status: "loadmore",
			next_loading: false,
			params: {
				page: 1,
				limit: 20
			},
			triggered: true,
			_freshing: false,
    }
  },
  computed: {
		...mapState(["isRefreshEventArticleList"]),
	},
  watch: {
		isRefreshEventArticleList() {
			this.params.page = 1;
			this.scrollTop = this.scrollTop == 0 ? 0.01 : 0;
      this.list = [];
			this.getList();
		}
	},
  methods: {
    getList() {
      this.status = "loading";
      let queryParams = {
        ...this.params,
        ...this.queryParams
      };
      articleList(queryParams).then(({code, data})=>{
        this.status = "loadmore";
        if(code == 200){
          if(this.params.page == 1){
            this.list = [];
          }
          this.list = [...this.list, ...data.list];
          this.$store.state.eventArticleListLength =  this.list.length;
          if(data.list.length < this.params.limit){
            this.status = "nomore";
          }
          this.$store.state.eventArticleListLength = this.list.length;
        }
      });
		},
    nextPage() {
			if(this.status == "loadmore"){
				this.params.page++;
				this.getList();
			}
		},
    cancel() {
      this.$store.state.eventArticleListLength = 0;
      this.$store.state.isEventArticle = false;
    },
    confirm() {
      this.cancel();
    },
		isToday(timestamp) {
		  const date = new Date(timestamp);
		  const today = new Date();
		  return (
		    date.getDate() === today.getDate() &&
		    date.getMonth() === today.getMonth() &&
		    date.getFullYear() === today.getFullYear()
		  );
		},
		toDestail(e) {
			this.$u.route("/pages/edetails/edetails",{
				id: e.id,
				l_id: e.l_id,
				event_id: this.eid
			});
		},
  }
}
</script>

<style lang="scss" scoped>
/deep/ .u-sticky{
  top: 0 !important;
}
.top{
  font-size: 36rpx;
  font-weight: bold;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #F0F0F0;
  justify-content: center;
  align-items: center;
  .icon{
    cursor: pointer;
    position: absolute;
    z-index: 1;
    left: 20rpx;
    top: 30rpx;
  }
}
.date{
  background-color: #F0F0F0;
  text-align: center;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
}
.main{
	height: calc(100% - 160rpx);
	overflow-y: auto;
}
.item{
	padding: 30rpx 20rpx;
	border-bottom: 1rpx solid #F1F1F1;
	.item-l{
		margin-top: 4rpx;
	}
	.item-r{
		width: 100%;
	}
}
.read{
	color: #999;
}
.text{
	flex: 1;
	font-size: 32rpx;
	line-height: 46rpx;
	word-break: break-all;
}
.img{
	width: 220rpx;
	height: 130rpx;
	margin-left: 20rpx;
}
.sentiment{
	margin-right: 5rpx;
	font-size: 24rpx;
	padding: 4rpx 10rpx;
	border-radius: 5rpx;
	color: #fff;
}
.sentiment-1 {
	background: #3477FF;
}
.sentiment-2 {
	background: #F8B551;
}
.sentiment-3 {
	background: #E60012;
}
.type {
	margin-right: 5rpx;
	font-size: 24rpx;
	padding: 2rpx 8rpx;
	border-radius: 5rpx;
	border: 1rpx solid #FD5E3A;
	color: #FD5E3A;
}
.des{
	margin-top: 20rpx;
	font-size: 24rpx;
	align-items: center;
	justify-content: space-between;
}
.info{
	align-items: center;
}
.avatar{
	width: 50rpx;
	height: 50rpx;
	margin-left: 10rpx;
	margin-right: 5rpx;
}
.name{
	max-width: 200rpx;
}
.platform{
	margin-left: 10rpx;
	color: #1E62FC;
	max-width: 200rpx;
}
.area{
	margin-left: 10rpx;
}
.source-text{
	border: 1rpx solid #1E62FC;
	padding: 10rpx;
	border-radius: 10rpx;
	margin: 10rpx 0;
}
.source-des{
	margin-top: 20rpx;
	font-size: 24rpx;
	align-items: center;
	justify-content: space-between;
}
.retweeted-right{
	align-items: center;
}
.retweeted-user{
	margin-right: 10rpx;
	border: 1rpx solid #999;
	border-radius: 50%;
	padding: 2rpx;
}
.v-1,.v-2{
	margin-left: 5rpx;
	width: 20rpx;
	height: 20rpx;
	background: url("./../static/cert-1.png") no-repeat center/contain;
}
.v-2{
	background: url("./../static/cert-2.png") no-repeat center/contain;
}
</style>